<template>
<!-- 登录页面 -->
    <div id="login">
        <div class="loginIcon" style="background-color:#FF0000;">
            <img src="../assets/icon.png"/>
        </div>
        <form class="loginInput">
            <div class="Tel">
                <label for="tel">Telphone ：</label>
                <input name="tel" type="tel" ref="telNumber">
            </div>
            <div class="Pas">
                <label for="password">Password ：</label>
                <input name="password" type="password" ref="passwordVal">
            </div>
            <div class="Btn">
                <input type="button" value="登录" @click="submit">
            </div>
        </form>
    </div>
</template>

<script>
export default {
    name:'login',
    data(){
        return {    
        
        }
    },
    created(){
        const token=window.localStorage.getItem('token');
        if(token!=null||token!=undefined){//如果token存在不为null，就执行
            this.$router.replace({path:'/mainPage/find'});
        }
    },
    methods:{
        submit(){
            //获取到手机号之后就提交，请求网络
            const phone=this.$refs.telNumber.value;
            const password=this.$refs.passwordVal.value;
            this.$refs.telNumber.value='';
            this.$refs.passwordVal.value='';
            if(phone!=''||password!=''){//添加一个判断减少不必要的请求
                    this.$http.post('http://localhost:3000/login/cellphone', {
                    phone:phone,
                    password:password
                }).then((res)=>{
                    //请求成功的时候，获取token、id值，并且将token、id存储在本地585255855
                    window.localStorage.setItem('token',res.data.token);
                    window.localStorage.setItem('id',res.data.account.id);
                    //跳转到主页面
                    this.$router.replace({path:'/mainPage/find'});
                }).catch((error) => {
                    console.log(error);
                });
            }
        },
    }
}
</script>

<style lang="stylus" scoped>
    #login
        width 100%
        height 100%
        background-color #e6463a
        box-sizing border-box
        display flex
        flex-direction column
        justify-content space-around
        align-items center
    .loginIcon
        width 100px
        height 100px
        border-radius 50%
        position relative
        img
            position absolute
            width 60px
            height 60px
            top 50%
            left 50%
            margin-top -30px
            margin-left -30px
            border-radius 50%
    .loginInput
        display table-cell
        text-align center
        color #ffffff
        height 50px
        .Tel
            padding 10px 0px
            border-bottom 1px solid #ffffff
        .Pas
            padding 10px 0px
            border-bottom 1px solid #ffffff
        input   
            width 200px
            height 30px
            border-radius 10px
            background-color #e6463a
            outline none
            color #ffffff
        .Btn
            margin-top 10px
            input
                box-shadow 0px 0px 5px #eeeeee
                background #ffffff
                width 70px
                height 30px
                color #FF0000
</style>